import React, { useEffect, useState } from 'react';
import { Skeleton,Flex, Divider, Space, Input, Button, } from 'antd';
import { DotChartOutlined, DownOutlined, SearchOutlined } from '@ant-design/icons';
import axios from 'axios';
import './index.css'
import Chuan from './chuan'
import Huabi from './huabi'

// 引入组件
import LazyImage from '../LazyImage/LazyImage';

const tabData = [
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/df5a696243b3af89c8fb5d756804d72c.svg',
      text: '添加'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/13f97bb37d5203ce8ec38ca2752dc72e.svg',
      text: '模版'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/5ce6d198cf438fd4c936c13735e0bff8.svg',
      text: '元素'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/4083d7349dc5f26ff65849935a7125fd.svg',
      text: '文字'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/385189e77857511173548af8a1281e6b.svg',
      text: '图片'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240424/953e7889f68cc1c841281345baa62654.svg',
      text: 'AI工具'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/7efc79b06a9fcc1acb689991b4d1c0a8.svg',
      text: '团队'
    },
    {
      imgSrc: 'https://img2.baidu.com/it/u=3294951924,3410146803&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      text: '我的'
    }
  ];

interface DataType {
  key: string;
  id: string;
  name: string;
  word: string;
  state: string;
  img: string;
}

type SizeType = 'default' | 'small' | 'large';

// 素材
const TabContent = ({ activeTab }: { activeTab: number }) => {

  const [block, setBlock] = useState(false);
  const [size, setSize] = useState<SizeType>('default');

  // 获取数据
  const [setderList, setSetderList] = useState<DataType[]>([]);
  const FeachList = async () => {
    const {
      data: { code, msg, setderList },
    } = await axios.get("/api/setderlist");
    if (code === 200) {
      setSetderList(setderList);
      console.log(setderList);
      
    }
  };

  useEffect(() => {
    FeachList();
  }, []);

  const handleDragStart = (event: React.DragEvent<HTMLDivElement>, src: string) => {
        event.dataTransfer.setData('text/plain', src);
    };
  const jiantou=[
        {img:'https://gd-ai-application.dancf.com/temp/51c70eeba71c9c099946835631127d5e.png'},
        {img:"https://gd-filems.dancf.com/gaoding/gaoding/02652/55f892c0e06c47488962ef99075ef03a.png?auth_key=1727153094-e079a5b495d44f85800c6c5c27b456f6-9029724606533949508-2164e9dddbc6ed8fa537768d2977ac03"},
        {img:"https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-2c2c.png"},
        {img:"https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-a72e.png"},
        {img:"https://gd-ai-application.dancf.com/temp/1ae071b3aacad983ecbe47830bcb0f00.png"},
        {img:"https://gd-ai-application.dancf.com/temp/5a39395bf6cf7cc93108cfb9ab50737e.png"},
        {img:"https://st0.dancf.com/02/cms/202406210500-3bfa.svg"},
 
  ]
  const BasicDecoration=[
    {img:"https://gd-ai-application.dancf.com/temp/51c70eeba71c9c099946835631127d5e.png"},
    {img:"https://gd-filems.dancf.com/gaoding/gaoding/02652/55f892c0e06c47488962ef99075ef03a.png?auth_key=1727153094-e079a5b495d44f85800c6c5c27b456f6-9029724606533949508-2164e9dddbc6ed8fa537768d2977ac03"},
    {img:"https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-2c2c.png"},
    {img:"https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-a72e.png"},
    {img:"https://gd-ai-application.dancf.com/temp/ed46d2a736bf279e4ec15a3a6be3aa46.png"},
    {img:"https://gd-ai-application.dancf.com/temp/1ae071b3aacad983ecbe47830bcb0f00.png"},
    {img:"https://gd-ai-application.dancf.com/temp/5a39395bf6cf7cc93108cfb9ab50737e.png"},
    {img:"https://st0.dancf.com/02/cms/202406210500-3bfa.svg"}
  ]
  const tabData = [
    {
      text:(<div>
    <Skeleton.Input active size={size} block={block} />
    <Flex gap="middle" vertical>
      <Space style={{ margin:'10px 0px' }}>
        <Skeleton.Image active />
        <Skeleton.Image active />
      </Space>
    </Flex>
    <Skeleton.Input active size={size} block={block} />
    <Flex gap="middle" vertical>
      <Space style={{ margin:'10px 0px' }}>
        <Skeleton.Image active />
        <Skeleton.Image active />
        <Skeleton.Image active />
      </Space>
    </Flex>
    <Flex gap="middle" vertical>
      <Space style={{ margin:'10px 0px' }}>
        <Skeleton.Image active />
        <Skeleton.Image active />
      </Space>
    </Flex>
    <Skeleton.Input active size={size} block={block} />
    <Flex gap="middle" vertical>
      <Space style={{ margin:'10px 0px' }}>
        <Skeleton.Node active style={{ height:'50px',width:'100px' }} />
        <Skeleton.Node active style={{ height:'50px',width:'100px' }} />
        <Skeleton.Node active style={{ height:'50px',width:'100px' }} />
      </Space>
    </Flex>
    <Flex gap="middle" vertical>
      <Space style={{ margin:'10px 0px' }}>
        <Skeleton.Node active style={{ height:'50px',width:'100px' }} />
        <Skeleton.Node active style={{ height:'50px',width:'100px' }} />
      </Space>
    </Flex>
    <Skeleton.Input active size={size} block={block} />
    </div>)
    },
    {
      text: (
        <div>
            {/* 搜索框 */}
            <Input size="large" placeholder="搜索模版" prefix={<SearchOutlined />} style={{width:'95%',margin:'10px 10px' }} />
            {/* 推荐模版/分类 */}
            <>
            <Button type="primary" style={{ marginLeft:'10px' }}>推荐模版</Button>
            <Button style={{ background:'#ccc',marginLeft:'10px' }}>分类<DownOutlined /></Button>
            </>
            {/* 瀑布流 */}
            <div id='pubuliu'>
            {/* 数据渲染 */}
            <div>
            {setderList.length > 0 &&
              setderList.map((item, ind) => (
                <dl key={ind}>
                  <dt>
                    <LazyImage src={item.img} alt="" />
                  </dt>
                  <dd style={{ color: "#fff" }}>{item.word}</dd>
                </dl>
            ))}
            </div>
            </div>
        </div>
      )
    },
    {
       text: (
        <div>
            {/* 搜索框 */}
            <Input size="large" placeholder="搜索模版" prefix={<SearchOutlined />} style={{width:'95%',margin:'10px 10px' }} />
            {/* 数据 */}
            <div id='Buttonbox' style={{ display:'flex',flexWrap:'wrap',margin:'10px' }}>
                <Button style={{ backgroundColor: 'rgb(251, 240, 255)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1702873971739.png" alt="" />
                  <span>形状</span>
                </Button>
                <Button style={{ backgroundColor: 'rgb(255, 240, 244)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1702874015348.png" alt="" />
                  <span>线条</span>
                </Button>
                <Button style={{ backgroundColor: 'rgb(254, 246, 239)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1702874088972.png" alt="" />
                  <span>容器</span>
                </Button>
                <Button style={{ backgroundColor: 'rgb(236, 252, 255)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1702874036761.png" alt="" />
                  <span>插画</span>
                </Button>
                <Button style={{ background:'#f2f7ff' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1705541440650.png" alt="" />
                  <span>边框</span>
                </Button>
                <Button style={{ backgroundColor: 'rgb(255, 242, 246)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1704263196988.png" alt="" />
                  <span>爱心</span>
                </Button>
                <Button style={{ backgroundColor: 'rgb(244, 242, 254)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1705368095348.png" alt="" />
                  <span>节日</span>
                </Button>
                <Button style={{ background:'#e8eaec' }}>
                  <DownOutlined />
                  <span>更多</span>
                </Button>
            </div>
            {/* 最近使用 */}
            <div>
              <p style={{ marginLeft:'10px' }}>最近使用</p>
              <div style={{ background:'  #ccc',borderRadius:'10px',margin:'10px' }}></div>
            </div>
            {/* AI广告 */}
            <img src="https://gaoding-market-fat.dancf.com/market-operations/market/side/b16d0f41e5994e539e99f2a643d23a74/1720695335601.png" alt="" id='logo' />
            {/* 线/箭头 */}
            <div id='xian'>
              <h4><p>线·箭头</p><span>查看更多</span></h4>
              
              {/* <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://gd-ai-application.dancf.com/temp/51c70eeba71c9c099946835631127d5e.png")}>
                  <img src="https://gd-ai-application.dancf.com/temp/51c70eeba71c9c099946835631127d5e.png" alt="" />
                </div>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://gd-filems.dancf.com/gaoding/gaoding/02652/55f892c0e06c47488962ef99075ef03a.png?auth_key=1727153094-e079a5b495d44f85800c6c5c27b456f6-9029724606533949508-2164e9dddbc6ed8fa537768d2977ac03")}>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/02652/55f892c0e06c47488962ef99075ef03a.png?auth_key=1727153094-e079a5b495d44f85800c6c5c27b456f6-9029724606533949508-2164e9dddbc6ed8fa537768d2977ac03" alt="" />
                </div>
             
                <div>
                  <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-2c2c.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-a72e.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/ed46d2a736bf279e4ec15a3a6be3aa46.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/1ae071b3aacad983ecbe47830bcb0f00.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/5a39395bf6cf7cc93108cfb9ab50737e.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/cms/202406210500-3bfa.svg" alt="" />
                </div>
              </div> */}
              <div id='jiantou'>
                {
                  jiantou.map((item:{img:string|undefined},index:React.Key|null|undefined)=>{
                    return (
                      <div key={index}>
                        {<img src={item.img}></img>}
                      </div>
                    )
                  })
                }

              </div>
            </div>
            {/* 基础装饰 */}
            <div id='BasicDecoration'>
              <h4><p>线·箭头</p><span>查看更多</span></h4>
              {/* <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://gd-ai-application.dancf.com/temp/51c70eeba71c9c099946835631127d5e.png")}>
                  <img src="https://gd-ai-application.dancf.com/temp/51c70eeba71c9c099946835631127d5e.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/02652/55f892c0e06c47488962ef99075ef03a.png?auth_key=1727153094-e079a5b495d44f85800c6c5c27b456f6-9029724606533949508-2164e9dddbc6ed8fa537768d2977ac03" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-2c2c.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-a72e.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/ed46d2a736bf279e4ec15a3a6be3aa46.png" alt="" />
                </div>
                <div>1
                  <img src="https://gd-ai-application.dancf.com/temp/1ae071b3aacad983ecbe47830bcb0f00.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/5a39395bf6cf7cc93108cfb9ab50737e.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/cms/202406210500-3bfa.svg" alt="" />
                </div>
              </div> */}
              {
                BasicDecoration.map((item:{img:string|undefined},index:React.Key|null|undefined)=>{
                    return (
                      <div key={index}>
                        {<img src={item.img}></img>}
                      </div>
                    )
                  })
              }
            </div>
        </div>
      )
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/4083d7349dc5f26ff65849935a7125fd.svg',
      text: '文字'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/385189e77857511173548af8a1281e6b.svg',
      text: <Chuan/>
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240424/953e7889f68cc1c841281345baa62654.svg',
      text: <Huabi/>
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/7efc79b06a9fcc1acb689991b4d1c0a8.svg',
      text: '团队'
    },
    {
      imgSrc: 'https://img2.baidu.com/it/u=3294951924,3410146803&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      text: '我的'
    }
  ];

  return (
    <div id="zuo-sucai">
      <div>{tabData[activeTab].text}</div>
    </div>
  );
};

// 整体一个左边盒子
const Sidebar = () => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index: number) => {
    setActiveTab(index);
  };

  return (
    <div style={{ display:'flex' }}>
      <div id="zuo-cebianlan">
        <ul>
          {tabData.map((tab, index) => (
            <li key={index} onClick={() => handleTabClick(index)}>
              <img src={tab.imgSrc} alt="" />
              <span>{tab.text}</span>
            </li>
          ))}
        </ul>
      </div>
      <div id="zuo-sucai">
        <TabContent activeTab={activeTab} />
      </div>
    </div>
  );
};

export default Sidebar;